<!-- 引导弹窗 -->
<template>
    <uni-popup ref="popup" type="center" :custom="true" maxHeight="100vh" width="none" :maskClick="false" :isRadius="false">
        <div class="get-phone-pup">
            <div class="attr-blo">
                <img class="attr-img" :src="userInfo.user_picture" alt />
            </div>
            <div class="pup-close" @click="close">
                <i class="iconfont iconclose"></i>
            </div>
            <div class="pup-top-blo">
                <div class="pup-top-back">
                    <img class="pup-top-back-img" :src="constant.imgUrl + 'common/get_phone_pup.png'" alt mode="widthFix" />
                </div>
                <div class="pup-top-text">
                    <div>{{ userInfo.nick_name }}</div>
                    <div class="we-text">欢迎来到我的店铺</div>
                </div>
            </div>
            <div class="pup-bottom-blo">
                <div class="get-phone-btn">
                    <get-phone-number @cbFn="close" :dataSource="'首页弹窗'">免费领取设计方案</get-phone-number>
                </div>
                <div>点击按钮即同意手机授权登录</div>
            </div>
        </div>
    </uni-popup>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
// import { setTimeout } from 'timers'
import { isPersonRoleType } from '@/utils/common'
import constant from '@/constant/index'
import moment from 'moment'
import getPhoneNumber from '@/pages/components/getPhoneNumber'
export default {
	components: {
		uniPopup,
		getPhoneNumber
	},
	props: {
		userInfo: {
			type: Object,
			require: true
		}
	},
	data() {
		return {
			taskStatus: true,
			constant: constant
		}
	},
	mounted() {},

	methods: {
		init() {
			this.$nextTick(() => {
				const showDate = uni.getStorageSync('showPhonePupDate')
				const wxMobile = uni.getStorageSync('wxMobile')
				if (showDate === moment().format('YYYY-MM-DD') || wxMobile) {
					this.closePopup()
				// } else if (openStatus == 1) {
				} else {
					this.openPopup()
					uni.setStorageSync('showPhonePupDate', moment().format('YYYY-MM-DD'))
				}
			})
		},
		openPopup() {
			this.$refs.popup.open()
		},
		closePopup() {
			this.$refs.popup.close()
		},
		close() {
			this.closePopup()
		}
	}
}
</script>

<style lang='scss' scoped>
.get-phone-pup {
    position: relative;
    width: 532px;
    text-align: center;
    // background-color: #fff;
    border-radius: 10px;
    .pup-close {
        position: absolute;
        top: 28px;
        right: 28px;
        z-index: 4;
        .iconclose {
            color: #fff;
            opacity: 0.2;
        }
    }
    .attr-blo {
        position: absolute;
        left: 184px;
        top: -70px;
        width: 140px;
        height: 140px;
        padding: 14px;
        background-color: #f97705;
        border-radius: 50%;
        box-shadow: 0 2px 10px #fd5109;
        z-index: 4;
        .attr-img {
            width: 140px;
            height: 140px;
            border-radius: 50%;
        }
    }
    .pup-top-blo {
        position: relative;
        color: #fff;
        width: 100%;
        .pup-top-back {
            .pup-top-back-img {
                width: 100%;
                display: block;
            }
        }
        .pup-top-text {
            position: absolute;
            top: 122px;
            font-size: 30px;
            width: 100%;
            .we-text {
                margin-top: 50px;
                font-size: 34px;
                // font-weight: 600;
                line-height: 1.4;
            }
        }
    }
    .pup-bottom-blo {
        position: relative;
        top: -4px;
        height: 200px;
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
        background-color: #fff;
        color: #bbb;
        padding-top: 40px;
        margin: 0 2px;
        .get-phone-btn {
            width: 470px;
            height: 90px;
            line-height: 90px;
            text-align: center;
            // font-weight: 600;
            font-size: 32px;
            color: #fff;
            margin: 0 auto 30px;
            background: linear-gradient(90deg, #f78702, #fd490a);
            border-radius: 50px;
        }
    }
}
</style>
